<template>
    <div class="m-input-box">
        <template v-if="metadata.options.link && readOnly">
            <a class="rx-button-link" @click="linkClick">{{ curVal}}</a>
        </template>
        <view class="rx-input-disabled" v-else-if="readOnly">
            {{curVal}}
        </view>
       <div v-else style="display: flex;align-items: center">
           <input-control
               style="flex: 1"
               v-model="curVal"
               @blur="onBlur"
               @change="onChange"
               @focus="onFocus"
               @onAllowClear="onAllowClear"
               :disabled="isDisabled"
               :placeholder="placeholder"
               :allowClear="metadata.options.allowClear"
               :isPassword="metadata.options.isPassword"
           >
               <template #prefix v-if="addonConfig.prefix.label">
                <span :style="{'color':addonConfig.prefix.color}">
                    {{addonConfig.prefix.label}}
                </span>
               </template>
               <template #suffix v-if="addonConfig.suffix.label">
                <span :style="{'color':addonConfig.suffix.color}">
                     {{addonConfig.suffix.label}}
                </span>
               </template>
           </input-control>
           <view class="rx-qrCode" v-if="metadata.options.qrCode && !readOnly && !H5">
               <my-icon @click="scanCode" size="1.3rem" style="color: rgba(66, 133, 244, 1)" type="icon-Group-"></my-icon>
           </view>
       </div>
    </div>
</template>

<script>
/*
文本框控件
 */
import MForm from '../js/MForm'
import FormBase from "../js/FormBase";
import Util from '@/js/Util.js'
import InputControl from "./InputControl.vue";
import LinkUrl from "@/js/LinkUrl"
import common from '@/common/constants.js'
import scanQR from '@/js/scanQR.js'
import {FormApi} from "@/api/FormApi.js";
export default {
    name: "MInput",
    mixins: [MForm,FormBase,LinkUrl,scanQR],
    components:{
        InputControl
    },
    data() {
        return {
            curVal:"",
            H5:false,
            isDisabled:false
        }
    },
    created(){
        // #ifdef H5
        if(common.AppType=='H5'){
            this.H5=true
        }
        // #endif
        this.isDisabled = this.showDisabledText();
    },
    computed:{
        addonConfig(){
            let {
                addonBeforeConfig,
                addonAfterConfig
            } = this.metadata.options ;
            return  {suffix:{...addonAfterConfig},prefix:{...addonBeforeConfig}}
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"componentsLang",key);
        },
        showDisabledText(){
            let options = this.metadata.options;
            if (options.valueSource!='input' && options.sourceMode=="when") {
                this.curVal = this.i18n('disabledText','自动生成无需填写');
                return  true;
            }
            return this.readOnly;
        },
        onChange:Util.debounce(function (val) {
            if(this.curVal){
                this.curVal = this.curVal.trim();
            }
            this.updateValue(this.curVal);
            this.triggerEmitEvents('change', this.curVal, this.data)
        }, 500),
        onBlur(val) {
            //验证唯一性
            if(this.metadata.options.uniqueValue){
                this.checkUnique(val);
            }
            this.triggerEmitEvents('blur', val, this.data)
        },
        onFocus(val){
            this.triggerEmitEvents('focus', val, this.data)
        },
        onAllowClear(){
            this.curVal=''
            this.updateValue('');
        },
        //扫码
        scanCode() {
            //获取当前是app，H5，钉钉，企业微信，飞书
            let mobileModel = common.AppType;
            switch (mobileModel) {
                case 'H5':
                    // #ifdef APP-PLUS
                    this.scanCodeApp();
                    // #endif
                    break;
                case  'ENTWX':
                    this.scanCodeENTWX();
                    break;
                case 'DD':
                    this.scanCodeDD();
                    break;

            }
        },
        checkUnique(val) {
            let alias=this.metadata.subTable || this.formVm.resForm.alias;
            let formJson = {
                "alias": alias,
                "keyName": this.metadata.field,
                "keyValue":val,
                "formData": this.data
            }
            if (this.metadata.subTable){
              formJson.isSub = true;
            }
            let self_ = this;
            FormApi.checkUniqueValue(formJson).then(validMainUnique=>{
                if (!validMainUnique) {
                    let language = uni.getStorageSync("language");
                    let name =self_.metadata.name;
                    uni.showToast({
                        title:(self_.metadata.subTable?this.i18n('sub','子表'):this.i18n('main','主表'))+ "【" + name[language] + "】"+this.i18n('checkUniqueValue','唯一性校验不通过！'), duration: 2000, icon: 'none'
                    });
                }
            });

        },
    },
    watch: {
        value: {
            handler(v) {
                this._asyncValue(v,()=>{
                    this.curVal = v;
                })
            },
            deep: true,
            immediate: true
        }
    },
}
</script>

<style scoped>
.m-input-box{
    position: relative;
}
.rx-button-link{
    color: #0a84ff;
}
.rx-qrCode{
    border:1px solid #d9d9d9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2rem;
    width: 2rem;
    border-radius: 5px;
    margin-left: 0.5rem;
}
.rx-input-disabled{
    background: rgba(245, 246, 249, 1);
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 4px;
    border: none;
    margin-top: 0.5rem;
    min-height: 1rem;
}
</style>
